<template>
    <div class="wrapper level">
        <mt-header title="我的等级" mtClass="no-bg-fff"/>
        <div class="banner">
            <img src="static/VIP.png" alt="" class="bg">
            <div class="header">
                <div class="inner">
                    <div class="info">
                        <div class="name" @click="$router.push('/account/myInfo')">{{ userInfo.name }}</div>
                        <div class="level">当前：{{myLevelName}}会员</div>
                    </div>
                    <div class="photo" @click="$router.push('/account/myInfo')">
                        <img :src="userInfo.photo || 'static/default-headImg.png'">
                    </div>
                </div>
            </div>
            <div class="swiper">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item,index) in gradeList" :key="index">
                        <div class="img">
                            <img :src="`static/level-${item.grade}.png`">
                            <div class="imgText">
                                <div class="level">{{item.name}}</div>
                                <div class="bottom">
                                    <div class="number">{{item.price | filterToThousands}}</div>
                                    <div class="time">有效期{{item.validity}}个月</div>
                                </div>
                            </div>
                            <div class="tag" :class="`level${item.grade}`" v-show="myLevel==item.grade">当前</div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="arrow"></div>
        </div>
        <div class="desc" :class="`index-${curLevel}`" v-show="curGrade">
            <div class="title">{{curGrade.grade==userInfo.userGrade?'我的':''}}{{ title }}会员特权</div>
            <div class="panel">
                <div class="panel-item">
                    <div class="inner">
                        <div class="left">
                            <span><img :src="`static/level-${curLevel}-1.png`" alt=""></span>
                        </div>
                        <div class="right">
                            <div>阅读收益</div>
                            <div>提升至普通会员{{curGrade.multiple}}倍</div>
                        </div>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="inner">
                        <div class="left">
                            <span><img :src="`static/level-${curLevel}-2.png`" alt=""></span>
                        </div>
                        <div class="right">
                            <div>分成奖励</div>
                            <div>享好友阅读收益{{curGrade.readDivide}}%</div>
                        </div>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="inner">
                        <div class="left">
                            <span><img :src="`static/level-${curLevel}-3.png`" alt=""></span>
                        </div>
                        <div class="right">
                            <div>好友购买</div>
                            <div>享{{curGrade.invitationNumber}}个好友购买金额的{{curGrade.buyDivide}}%奖励</div>
                        </div>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="inner">
                        <div class="left">
                            <span><img :src="`static/level-${curLevel}-4.png`" alt=""></span>
                        </div>
                        <div class="right">
                            <div>其他收益</div>
                            <div>敬请期待</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" @click.native="toPurchase()" :disabled="myLevel>curLevel?true:false">
                <span v-if="myLevel=='0'">点击购买</span>
                <span v-else>
                    {{ myLevel>curLevel?'点击购买':'点击续费' }}
                </span>
            </mt-button>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import { toThousands } from '@/utils/index'
export default {
    data(){
        const that = this;
        return {
            photo:'',
            userInfo: {},
            myLevel: '',
            curLevel: '',
            myLevelName: '',
            curGrade:{},
            title: '',
            gradeList:[
                {
                    id: 2,                //id
                    grade: '1',           //等级
                    name: "青铜发动机",    //等级名称
                    price: 2500,         //价格
                    validity: 4,          //有效期
                    multiple: 3,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 5,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                },
                {
                    id: 3,                //id
                    grade: '2',           //等级
                    name: "白银发动机",    //等级名称
                    price: 5000,         //价格
                    validity: 6,          //有效期
                    multiple: 6,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 10,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                },
                {
                    id: 4,                //id
                    grade: '3',           //等级
                    name: "黄金发动机",    //等级名称
                    price: 10000,         //价格
                    validity: 8,          //有效期
                    multiple: 12,          //阅读倍数
                    readDivide:20,         //下线阅读分成(百分比)
                    invitationNumber: 20,  //邀请码数量
                    buyDivide: 20         //下线购买奖励(百分比)
                }
            ],
            swiperOption: {
                speed: 1000,
                slidesPerView: 'auto',
                centeredSlides: true,
                on: {
                    transitionEnd: function() {
                        that.curLevel = this.realIndex + 1;
                        // console.log(this.activeIndex, this.realIndex)
                    }        
                }
            }
        }
    },
    components:{
        mtHeader
    },
    filters:{
        filterToThousands(num){
            return toThousands(num)
        }
    },
    computed:{
        swiper(){
            return this.$refs.mySwiper.swiper
        }
    },
    activated(){
        this.init();
    },
    watch: {
        curLevel(val) {
            this.curGrade = this.gradeList[val-1]
            this.title = this.curGrade.name.substring(0, 2)
        }
    },
    methods:{
        ...mapActions('user', [
            'get_userInfo_cache',
            'get_userInfo_data'
        ]),
        init(){
            // 用户信息的缓存？缓存 : 发送请求
            this.get_userInfo_cache()
            .then(res => {
                if (res) {
                    this.userInfo = res
                    this.myLevel = res.userGrade
                    
                    if(this.myLevel=='0'){
                        this.curGrade = [] // 普通会员
                        this.myLevelName = '普通'
                        this.title = ''
                    }else{
                        this.curGrade = this.gradeList[this.myLevel-1]
                        this.myLevelName = this.gradeList[this.myLevel-1].name.substring(0, 2)
                        this.title = this.curGrade.name.substring(0, 2)
                    }
                    
                    this.swiper.slideTo(this.myLevel-1, 0, false)
                } else {
                    this.get_userInfo_data().then(res => {
                        this.userInfo = res
                        this.myLevel = res.userGrade

                        if(this.myLevel=='0'){
                            this.curGrade = [] // 普通会员
                            this.myLevelName = '普通'
                            this.title = ''
                        }else{
                            this.curGrade = this.gradeList[this.myLevel-1]
                            this.myLevelName = this.gradeList[this.myLevel-1].name.substring(0, 2)
                            this.title = this.curGrade.name.substring(0, 2)
                        }

                        this.swiper.slideTo(this.myLevel-1, 0, false)
                    })
                }
            })
        },
        toPurchase(){
            this.$router.push({
                path:'/account/purchase',
                query:{
                    level: this.curLevel
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.level{
    .banner{
        background:linear-gradient(90deg,rgba(34,40,54,1),rgba(20,29,49,1));
        padding-top:60px;
        position:relative;
        .bg{
            position:absolute;
            top:0;
            left:0;
        }
        .header{
            height: 45px;
            margin: 0 15px;
            color: #fff;
            .inner{
                width:100%;
                height:45px;
                position:relative;
                .photo{
                    width:45px;
                    height:45px;
                    border-radius:50%;
                    display:inline-block;
                    img{
                        width:45px;
                        height:45px;
                        border-radius:50%;
                        display:inline-block;
                    }
                }
                .info{
                    width:100%;
                    height:45px;
                    padding-left:55px;
                    position:absolute;
                    top:0;
                    left:0;
                    .name{
                        font-size:16px;
                        color:#fff;
                        margin-bottom:7px;
                    }
                    .level{
                        font-size:13px;
                        color:rgba(255,255,255,0.6);
                    }
                }
            }
        }
        .swiper{
            .swiper-container{
                .swiper-slide{
                    width: 80%;
                    padding: 30px 8px 0 8px;
                    .img{
                        display: block;
                        position:relative;
                        img{
                            border-top-left-radius: 5px;
                            border-top-right-radius: 5px;
                        }
                        .imgText{
                            color:#fff;
                            position:absolute;
                            top:17%;
                            left:10%;
                            height:65%;
                            .level{
                                font-size:20px;
                            }
                            .bottom{
                                position:absolute;
                                bottom:3%;
                                left:0;
                                .number{
                                    font-size:22px;
                                    position:relative;
                                    padding-left:25px;
                                    &:before{
                                        content: '';
                                        display:inline-block;
                                        width:20px;
                                        height:20px;
                                        position:absolute;
                                        top:50%;
                                        left:0;
                                        transform:translateY(-50%);
                                        background:url(../../../assets/coin.png) no-repeat 0 0;
                                        background-size:100% 100%;
                                    }
                                }
                            }
                        }
                        .tag{
                            display:inline-block;
                            width:55px;
                            height:25px;
                            line-height:25px;
                            text-align:center;
                            color:#fff;
                            font-size:13px;
                            border-radius:5px 0px 5px 0px;
                            position:absolute;
                            top:0;
                            left:0;
                            &.level1{
                                background:#F3886B;
                            }
                            &.level2{
                                background:#406482;
                            }
                            &.level3{
                                background:#ECAE4A;
                            }
                            &.level4{
                                background:#525E6C;
                            }
                            &.level5{
                                background:#5B6582;
                            }
                            &.level6{
                                background:#7856B9;
                            }
                        }
                    }
                }
            }
        }
        .arrow{
            width:0;
            height:0;
            overflow:hidden;
            font-size: 0;
            line-height: 0;
            border-width:10px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #fff transparent;
            position:absolute;
            bottom:0;
            left:50%;
            margin-left:-10px;
            z-index: 1;
        }
    }
    .desc{
        padding: 25px 15px 10px 15px;
        .title{
            font-size:19px;
            color:#333;
            font-weight:bold;
            margin-bottom:20px;
        }
        .panel{
            display:flex;
            flex-wrap: wrap;
            .panel-item{
                width: 48.5%;
                height:75px;
                border-radius:5px;
                margin-bottom:10px;
                position:relative;
                &:nth-child(even){
                    margin-left:3%;
                }
                .inner{
                    position:absolute;
                    top:50%;
                    transform:translateY(-50%);
                    .left{
                        width:40px;
                        height:40px;
                        position:absolute;
                        top:50%;
                        left:5px;
                        transform:translateY(-50%);
                        span{
                            display:inline-block;
                            width:40px;
                            height:40px;
                            border-radius:50%;
                            img{
                                vertical-align:middle;
                                width:24px;
                                height:24px;
                                position:absolute;
                                top:50%;
                                left:50%;
                                transform:translate(-50%,-50%);
                            }
                        }
                    }
                    .right{
                        padding-left:50px;
                        padding-right:5px;
                        div{
                            font-size:15px;
                            color:#333333;
                            &:last-child{
                                font-size:12px;
                                color:#666666;
                                margin-top:5px;
                            }
                        }
                    }
                }
            }
        }
        &.index-1{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(247,176,156,0.6);
                    .left{
                        span{
                            background: #FFF5F0;
                        }
                    }
                }
            }
        }
        &.index-2{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(93,134,169,0.6);
                    .left{
                        span{
                            background: #F1F9FF;
                        }
                    }
                }
            }
        }
        &.index-3{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(245,172,54,0.6);
                    .left{
                        span{
                            background: #FFF8E9;
                        }
                    }
                }
            }
        }
        &.index-4{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(82,94,108,0.6);
                    .left{
                        span{
                            background: #F3F4F5;
                        }
                    }
                }
            }
        }
        &.index-5{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(65,84,137,0.6);
                    .left{
                        span{
                            background: #EFF3FF;
                        }
                    }
                }
            }
        }
        &.index-6{
            .panel{
                .panel-item{
                    box-shadow:0px 1px 4px 0px rgba(195,164,255,0.6);
                    .left{
                        span{
                            background: #F8F5FF;
                        }
                    }
                }
            }
        }
    }
    .default-btn{
        position:absolute;
        bottom:30px;
    }
}
</style>
